<template>
	<page :nav="false" ref="pageRef">
		<view class="detailWrapper" :style="{ backgroundImage: 'url(' + ossurl.box.detail.awardBg + ')' }">
			<view class="pagae-nav" :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }">
				<view class="flex-align-center relative" style="height: 80rpx">
					<text class="cuIcon-back back" @click.stop="back"></text>
					<view v-if="data" class="title line-ellipsis">
						{{ data && data.name }}
					</view>
				</view>
			</view>
			<view :style="{ height: 72 + statusBarHeight * 2 + 'rpx' }"></view>

			<top v-if="data" :data="data" :horse="horse" @onShowRecord="showRecord" @onShowUpdate="showUpdate"
				:type="2" />
			<view class="SwiperBox productSwiper">

				<view class="imageBox">
					<image class="image" :src="data.pic" mode="aspectFit" />
				</view>
				<view class="level" :style="{ backgroundImage: 'url(' + ossurl.box.detail.levelBg + ')' }"
					@click="showDetail()">
					查看商品详情
				</view>

			</view>

		</view>
		<view class="shipping" :style="{ backgroundImage: 'url(' + ossurl.box.ruleBg + ')' }">
			{{rules}}
		</view>

		<view class="lockTimeBox" v-if="box && box.lock">
			剩余时间：
			<view class="lockTimeBarBox">
				<view class="lockTime">
					<view class="processBar" :style="{ right: 'calc(100% - ' + leftNum + '%)' }"></view>
				</view>
				<view class="line" :style="{ left: leftNum + '%' }"></view>
				<view class="text" :style="{ left: 'calc(' + leftNum + '% - 26rpx)' }">
					{{ leftTime }}s
				</view>
			</view>
		</view>
		<first-last :data="data" :box="box" :prizeList="box.prizeList" @nextBox="nextBox" @preBox="preBox"
			@showBox="showBox" />
		<product-a v-if="products" :products="products" :poolId="poolId" :box="box" :levelist="probability" />
		<explain v-if="products" :poolId="poolId" />
		<view style="height: 300rpx;"></view>
		<view class="bottom paddingX10" v-if="data && box">
			<view class="bottom-btns flex-align-around">
				<view class="relative btnItem" @click="pay(1)"
					:style="{ backgroundImage: 'url(' + ossurl.box.detail.yfBtn + ')' }">
					购买一盒
					<view v-if="$valid.isNumber2(data.specialPrice)" class="text">
						(¥{{ data.specialPrice }})
					</view>
					<view v-else class="text">(¥{{ data.price }})</view>
				</view>
				<view class="relative btnItem" @click="pay(5)"
					:style="{ backgroundImage: 'url(' + ossurl.box.detail.wlBtn + ')' }">
					购买五盒
					<view v-if="data.specialPriceFive" class="text">
						(¥{{ data.specialPriceFive }})
					</view>
					<view v-else class="text">(¥{{ data.price * 5 }})</view>
				</view>
				<view class="relative btnItem" @click="$refs.numRef.show(box)"
					:style="{ backgroundImage: 'url(' + ossurl.box.detail.csBtn + ')' }">
					购买多盒
				</view>
			</view>
		</view>
		<image class="ck" :src="ossurl.box.detail.warehouse" webp @click="showCK" />
		<image class="mj" :src="ossurl.box.detail.stone" v-if="user&&rockShow" webp @click="$router.push('magic')" />
		<image class="record" :src="ossurl.box.detail.record" webp @click="showRecord" />
		<image class="rule" :src="ossurl.box.detail.rule" webp @click="showRule" />
		<image class="refresh" :src="ossurl.box.detail.refresh" webp @click="refreshBox(true)" />
		<image v-if="box && !box.lock" class="lock" :src="ossurl.box.detail.lock" webp @click="boxLock" />
		<image v-if="box && box.lock && user && box.lock.locker === user.userId" class="lock"
			:src="ossurl.box.detail.unlock" webp @click="boxUnLock" />
		<image v-if="
                box && box.leftQuantity > 0 && box.lock && user && box.lock.locker === user.userId
            " class="Inclusive" :src="ossurl.box.detail.Inclusive" webp @click="payAll" />
		<box-choose ref="boxRef" v-if="data" :poolId="poolId" @choose="onChooseBox" />
		<num-choose ref="numRef" v-if="data" :poolId="poolId" @pay="onNumPay" />
		<checkout ref="checkoutRef" v-if="data" :data="data" @close="onClose" :poolId="poolId" @success="onSuccess" />
		<result-com ref="result" :num="num" :periodQuantity="periodQuantity" />
		<record ref="recordRef" @close="onClose" :poolId="poolId" />
		<hiddenTask ref="hiddenTaskRef" @refresh="init(true)" />
		<ruleDialog ref="ruleDialog"></ruleDialog>
		<detail ref="detailRef" v-if="products" :products="products" :poolId="poolId" :box="box"
			:levelist="probability"></detail>
	</page>
</template>

<script>
	import loginMixin from '@/mixin/login'
	import resource from '@/utils/resource'
	import top from './../award_detail/top'
	import official from './../award_detail/official'
	import productA from './product_a'
	import productB from './../award_detail/product_b'
	import checkout from './../award_detail/checkout'
	import resultCom from './result_com'
	import prince from './../award_detail/prince'
	import boxChoose from './box_choose'
	import numChoose from './num_choose'
	import record from './../award_detail/record'
	import detail from './detail'
	import levelRatio from './../award_detail/level_ratio'
	import firstLast from './first_last'
	import hiddenTask from '../hidden_activity/hidden_task_dialog'
	import explain from '../award_detail/explain.vue'
	import {
		throttle
	} from '@/utils'
	import ossurl from '@/utils/ossurl'
	import {
		LEVEL_MAP
	} from '@/utils/config'
	import ruleDialog from './ruleDialog'
	export default {
		mixins: [loginMixin],
		components: {
			top,
			official,
			productA,
			productB,
			checkout,
			resultCom,
			prince,
			boxChoose,
			numChoose,
			record,
			levelRatio,
			firstLast,
			hiddenTask,
			ruleDialog,
			detail,
			explain
		},
		data() {
			return {
				ossurl,
				resource,
				poolId: null,
				data: null,
				products: null,
				horse: null,
				lock: false,
				tableData: null,
				periodQuantity: null,
				box: null,
				boxNum: null,
				probability: null,
				leftTime: 0,
				smartPayFlag: true,
				scrollTop: 0,
				current: 0,
				rules:''
			}
		},
		computed: {
			statusBarHeight() {
				if (this.$store.state.systemInfo) {
					return this.$store.state.systemInfo.statusBarHeight
				}
				return 20
			},
			headerBg() {
				return this.scrollTop > 0 ? '#fff' : 'transparent'
			},
			user() {
				return this.$store.state.userInfo
			},
			leftNum() {
				return this.box && this.box.lock && this.box.lock.leftTime ?
					(this.leftTime / this.box.lock.leftTime) * 100 :
					0
			},
			rockShow() {
				let val = false
				val = uni.getStorageSync('rockShow')
				return val
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(options) {
			this.poolId = options.poolId
			this.poolIn()
			if (this.$store.state.hide) {
				this.showRule()
			}
		},
		mounted() {
			setTimeout(() => {
				this.init(true)
			}, 100)
		},
		onUnload() {
			this.poolOut()
			this.lockTimeEnd()
		},
		onShareAppMessage(res) {
			return {
				title: this.data.name,
				path: '/pages/award/index',
				imageUrl: this.data.cover
			}
		},
		onShareTimeline() {
			return {
				title: '超级玛特 次元聚集地，潮玩新势力',
				query: 'poolId=' + this.poolId,
				imageUrl: this.data.cover
			}
		},
		methods: {
			showSwipe(index) {
				this.$router.push('award_detail_swipe', {
					poolId: this.poolId,
					index
				})
			},
			getLevel(level) {
				let item = LEVEL_MAP[level]
				if (item) {
					return item.title
				} else {
					return ''
				}
			},
			back() {
				this.$router.back()
			},
			poolIn() {
				if (this.$common.isLogin()) {
					this.$service.award.poolIn(this.poolId)
				}
			},
			poolOut() {
				if (this.$common.isLogin()) {
					this.$service.award.poolOut(this.poolId)
				}
			},
			async init(loading = false) {
				this.getData(loading)
				this.getBox()
				this.getHorse()
				this.getParamConfig()
			},
			async getData(loading = false) {
				const res = await this.$service.award.detail(this.poolId, loading)
				this.data = res
				res && (this.products = res.luckGoodsList)
				this.$refs.princeRef && this.$refs.princeRef.refresh()
			},
			refreshBox(loading = false) {
				this.getBox(this.boxNum, loading)
			},
			onChooseBox(index) {
				this.getBox(index, true)
			},
			async getBox(num, loading = false) {
				const res = await this.$service.award.box(this.poolId, num, loading)
				
				res && this.handleBoxResult(res)
			},
			handleBoxResult(res) {
				let map = {}
				if (res.usedStat) {
					res.usedStat.forEach((item) => {
						map[item.spuId] = item
					})
				}
				res.usedStat = map
				this.box = res
				this.boxNum = res.number
				this.lockTimeStart()
				console.log(res)
				if (res.leftQuantity <= 0) {
					uni.showToast({
						title:'盒子已售完'
					})
					this.probability = [{
							level: 'A',
							probability: '0'
						},
						{
							level: 'B',
							probability: '0'
						},
						{
							level: 'C',
							probability: '0'
						},
						{
							level: 'D',
							probability: '0'
						}
					]
				} else {
					this.probability = [{
							level: 'A',
							probability: ((res.leftQuantityA / res.leftQuantity) * 100).toFixed(4)
						},
						{
							level: 'B',
							probability: ((res.leftQuantityB / res.leftQuantity) * 100).toFixed(4)
						},
						{
							level: 'C',
							probability: ((res.leftQuantityC / res.leftQuantity) * 100).toFixed(4)
						},
						{
							level: 'D',
							probability: ((res.leftQuantityD / res.leftQuantity) * 100).toFixed(4)
						}
					]
				}
			},
			async getHorse() {
				const res = await this.$service.award.detailHorse(this.poolId)
				this.horse = res
			},
			async preBox() {
				if (this.boxNum <= 1) return
				const res = await this.$service.award.preBox(this.poolId, this.boxNum)
				
				res && this.handleBoxResult(res)
			},
			async nextBox() {
				if (this.boxNum >= this.box.lastNumber) return
				const res = await this.$service.award.nextBox(this.poolId, this.boxNum)
				
				res && this.handleBoxResult(res)
			},
			showBox() {
				this.$refs.boxRef.show()
			},
			async getParamConfig() {
				const res = await this.$service.user.getParamConfig('show_rule');
				this.rules = res.data
			},
			async pay(num) {
				throttle.call(() => {
					this.previewPay(num)
				})
			},
			async previewPay(num) {
				if (!this.$common.isLogin()) {
					this.$router.push('login')
					return
				}
				const res = await this.$service.award.preview(this.poolId, num, this.box.number)
				if (res) {
					this.$refs.checkoutRef.show(num, res, this.boxNum)
					this.lock = true
				}
			},
			async payAll() {
				if (!this.$common.isLogin()) {
					this.$router.push('login')
					return
				}
				const res = await this.$service.award.preview(
					this.poolId,
					1,
					this.box.number,
					null,
					1
				)
				if (res) {
					this.$refs.checkoutRef.show(res['quantity'], res, this.boxNum, null, 1)
					this.lock = true
				}
			},
			async onNumPay({
				res,
				chooseNum,
				boxNum
			}) {
				this.$refs.checkoutRef.show(chooseNum.length, res, this.boxNum, chooseNum)
			},
			showCK() {
				this.$router.push('store')
			},
			onClose() {
				this.lock = false
			},
			onSuccess({
				tradeNo
			}) {
				this.$refs.numRef && this.$refs.numRef.close()
				this.lock = false
				this.$message.showLoading()
				this.tradeNo = tradeNo
				this.getResult(0)
				if (this.$store.state.hide == 1) {
					this.$service.user.getHide()
					this.pageConfig('magic_luck')
				}
				//菊花刷新
			},
			async pageConfig(key) {
				const res = await this.$service.base.pageConfig(key)
				let pageConfig = this.$store.state.pageConfig || {}
				pageConfig[key] = res
				this.$store.commit(SET_PAGE_CONFIG, {
					...pageConfig
				})
			},
			getResult(count) {
				setTimeout(async () => {
					await this.getResultData()
					if (this.tableData && this.tableData.length > 0) {
						this.$message.hideLoading()
						this.showResult()
					} else {
						if (count < 4) {
							this.initData(count + 1)
						} else {
							this.fail()
						}
					}
				}, 500)
			},
			async getResultData() {
				const res = await this.$service.award.applyResult(this.tradeNo)
				if (res && res.inventoryList) {
					let array = res.inventoryList
					if (res.magicFireworksList && res.magicFireworksList.length > 0) {
						array = [...res.magicFireworksList, ...res.inventoryList]
					}
					this.tableData = array
					if (res.kingRealtime) {
						this.periodQuantity = res.kingRealtime.periodQuantity
					}
					if (res.richmanTicketRealtime && res.richmanTicketRealtime.changeTicket) {
						this.changeTicket = res.richmanTicketRealtime.changeTicket
					} else {
						this.changeTicket = 0
					}
					this.refreshBox()
				}
				const spuIds = res.inventoryList.map((item) => item.spu.id)
				const hideRes = await this.$service.award.hideTaskStart(JSON.stringify(spuIds))
				if (hideRes === 1 || hideRes === 2) {
					this.$refs.hiddenTaskRef.show(hideRes)
				}
				return true
			},
			async showResult() {
				if (this.tableData && this.tableData.length > 0) {
					let array = [...this.tableData]
					this.$refs.result.show(array, this.changeTicket)
				}
			},
			async fail() {
				this.$message.hideLoading()
				this.tableData = null
				this.$message.confirm(
					'购买结果请至订单详情查看',
					() => {
						this.$router.push('order_award')
					},
					'',
					['去查看', '取消']
				)
			},
			showRecord() {
				this.$refs.recordRef.show()
				this.lock = true
			},
			async boxLock() {
				if (!this.$common.isLogin()) {
					this.$router.push('login')
					return
				}
				await this.$service.award.boxLock(this.poolId, this.boxNum)
				this.refreshBox(true)
			},
			async boxUnLock() {
				await this.$service.award.boxUnLock(this.poolId, this.boxNum)
				this.refreshBox(true)
			},
			lockTimeStart() {
				this.lockTimeEnd()
				if (this.box && this.box.lock) {
					this.leftTime = this.box.lock.leftTime
					this.timer = setInterval(() => {
						this.leftTime -= 1
						if (this.leftTime <= 0) {
							this.lockTimeEnd()
							this.getBox()
						}
					}, 1000)
				}
			},
			lockTimeEnd() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
				this.leftTime = 0
			},
			closeSmartTitle() {
				this.smartPayFlag = false
			},
			showRule() {
				// this.$router.push('playing_method', { type: 2 })
				this.$refs.ruleDialog.visible = true
			},
			handleChange(e) {
				this.current = e.detail.current
			},
			handlePrev() {
				this.current -= 1
			},
			handleNext() {
				this.current += 1
			},
			getLeftNum(row) {
				if (
					!this.box ||
					!this.box.usedStat ||
					!this.box.usedStat[row.spu.id] ||
					!this.box.usedStat[row.spu.id].quantity
				) {
					return row.quantity
				}
				return row.quantity - this.box.usedStat[row.spu.id].quantity
			},
			showDetail() {
				this.$refs.detailRef.show()
			},
			getProbability(row) {
				if (!this.box) return
				let leftNum = this.getLeftNum(row)
				return (
					this.$common.ignoreRatio0(
						((leftNum / this.box.leftQuantity) * 100).toFixed(4)
					) + '%'
				)
			}
		}
	}
</script>

<style></style>
<style lang="scss" scoped>
	.award-detail {
		padding-bottom: calc(136rpx + env(safe-area-inset-bottom));
	}

	.detailWrapper {
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: #fde9dd;
		height: 1200rpx;

		.SwiperBox {
			position: relative;

			.prev,
			.next {
				position: absolute;
				top: 20%;
				z-index: 90;

				image {
					width: 138rpx;
					height: 138rpx;
				}
			}

			.prev {
				left: 0;
			}

			.next {
				right: 0;
			}
		}

		.productSwiper {
			height: 750rpx;

			.imageBox {
				text-align: center;
				height: 40.5vh;
				font-size: 0;
				line-height: 0;

				image {
					width: 400rpx;
					height: 40.5vh;
					animation: animateImage 3s;
					animation-play-state: running;
					animation-iteration-count: infinite;
					animation-timing-function: linear;
				}
			}

			.level {
				text-align: center;
				font-size: 24rpx;
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: 700;
				color: #ec2c30;
				background-size: 272rpx 62rpx;
				background-position: center;
				background-repeat: no-repeat;
				line-height: 62rpx;
			}

			@keyframes animateImage {

				from,
				to {
					transform: translate3d(0, 0, 0);
				}

				25% {
					transform: translate3d(0, 10px, 0);
				}

				50% {
					transform: translate3d(0, 0, 0);
				}

				75% {
					transform: translate3d(0, -10px, 0);
				}

				100% {
					transform: translate3d(0, 0, 0);
				}
			}
		}
	}

	.pagae-nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 100;
		align-items: center;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 72rpx;
			width: 500rpx;
		}

		.back {
			z-index: 1800;
			font-size: 32rpx;
			line-height: 32rpx;
			position: absolute;
			left: 20rpx;
			top: 24rpx;
		}
	}

	.bg {
		position: fixed;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.smart_pay {
		height: 50rpx;
		background: linear-gradient(90deg, #3800b3 0%, #655b82 100%);
		margin: 20rpx 28rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;
		color: #fff;
		line-height: 50rpx;

		.smart_rule {
			display: inline-block;
			width: 36rpx;
			height: 36rpx;
			line-height: 30rpx;
			margin: 0 0 0 10rpx;
			vertical-align: text-top;
		}

		.smart_X {
			position: absolute;
			right: 20rpx;
			top: 5rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.fill-height {
		height: 168rpx;
	}

	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fde9dd;
		height: 168rpx;
		padding-bottom: 40rpx;

		.bottom-btns {
			height: 128rpx;

			.btnItem {
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 700;
				color: #ffffff;
				line-height: 44rpx;
				background-size: 100% 100%;
				padding: 20rpx 12rpx;
				text-align: center;
				flex: 1;
				margin: 0 13rpx;

				.text {
					display: inline-block;
					font-size: 18rpx;
					line-height: 18rpx;
				}

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.image {
			height: 108rpx;
			width: 0;
		}
	}

	.sw,
	.mj,
	.ck {
		position: fixed;
		right: 0rpx;
		width: 72rpx;
		height: 112rpx;
	}

	.mj {
		bottom: 800rpx;
	}

	.sw {
		bottom: 540rpx;
		width: 128rpx;
		height: 128rpx;
	}

	.ck {
		bottom: 690rpx;
	}

	.record {
		position: fixed;
		left: 0rpx;
		width: 72rpx;
		height: 158rpx;
		bottom: 640rpx;
	}

	.rule {
		position: fixed;
		left: 0rpx;
		bottom: 800rpx;
		width: 72rpx;
		height: 112rpx;
	}

	.refresh {
		position: fixed;
		right: 0rpx;
		width: 96rpx;
		height: 96rpx;
		bottom: 580rpx;
	}

	.lock {
		position: fixed;
		left: 0rpx;
		width: 96rpx;
		height: 96rpx;
		bottom: 530rpx;
	}

	.Inclusive {
		position: fixed;
		right: 0rpx;
		bottom: 460rpx;
		width: 96rpx;
		height: 96rpx;
	}

	.lockTimeBox {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fde9dd;
		padding-bottom: 0;
		font-size: 24rpx;

		.lockTimeBarBox {
			position: relative;
			flex: 1;
			height: 60rpx;

			.line {
				width: 4rpx;
				height: 24rpx;
				background: #fead33;
				border-radius: 4rpx;
				left: 0;
				right: 0;
				bottom: 16rpx;
				position: absolute;
			}

			.text {
				position: absolute;
				line-height: 26rpx;
				width: 54rpx;
				text-align: center;
				font-size: 20rpx;
				background: #000;
				color: #fff;
				top: -20rpx;

				&::after {
					content: '';
					display: block;
					border: 8rpx solid;
					border-color: #000 transparent transparent transparent;
					position: absolute;
					bottom: -16rpx;
					left: 20rpx;
					z-index: 100;
				}
			}
		}

		.lockTime {
			border-radius: 16rpx;
			height: 16rpx;
			background: rgba(255, 255, 255, 0.63);
			position: absolute;
			bottom: 20rpx;
			left: 0;
			right: 0;
			overflow: hidden;

			.processBar {
				position: absolute;
				left: 0;
				height: 16rpx;
				background: linear-gradient(270deg, #fec433 0%, #fead33 100%);
			}
		}
	}

	.shipping {
		background-size: 100% 100%;
		width: 100%;
		height: 128rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 12px;
		color: #D04214;
		line-height: 35rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		padding:10rpx 80rpx;
		display: flex;
		align-items: center;
	}
</style>